
page {
  background-color: #F8F8F8;
  width: 100%;
  height: 100%;
}

.detail-container {
  display: flex;
  background-color: white;
  flex-direction: column;


  .introduce-content {
    display: flex;
    flex-direction: column;
    width: 750px;

    position: relative;
    background: linear-gradient(268deg, #FCF9F4 0%, #FFFFFF 100%, #FFFFFF 100%);
    box-shadow: 8px 8px 16px 4px rgba(79, 57, 42, 0.1);
    margin-top: -65px;
    z-index: 6666;
    border-radius: 20px 20px 0px 0px;

    .right-bg {
      position: absolute;
      width: 160px;
      height: 102px;
      right: 0;
      bottom: 0;
    }


    .title-content {
      display: flex;
      flex-direction: row;
      margin-top: 60px;
      margin-bottom: 36px;
      margin-left: 40px;

      .title {
        font-size: 32px;
        font-weight: 500;
        color: #333333;
        flex: 1;
        line-height: 32px;
        white-space:nowrap;
        margin-right: 40px;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .code {
        font-size: 28px;
        font-weight: 400;
        margin-right: 40px;
        color: #777777;
        line-height: 28px;
      }
    }

    .des-content {
      display: flex;
      margin-left: 40px;
      align-items: center;
      margin-bottom: 60px;
      flex-direction: row;
      margin-right: 15px;

      .price-title {
        font-size: 28px;
        font-weight: 400;
        color: #777777;
        line-height: 28px;
      }

      .price {
        color: #C09862;
        margin-left: 10px;
        margin-right: 60px;
        font-size: 28px;
        font-weight: 400;
        line-height: 28px;
      }
    }
  }

  .chart-content {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    width: 750px;
    height: 616px;
    background: #FFFFFF;
    box-shadow: 8px 8px 16px 4px rgba(79, 57, 42, 0.1);

    .title-content {
      display: flex;
      flex-direction: row;
      margin-top: 60px;
      margin-left: 20px;

      .icon {
        width: 6px;
        height: 26px;
        margin-right: 14px;
      }

      .title {
        font-size: 32px;
        font-weight: 500;
        color: #666666;
        line-height: 32px;
      }
    }

    .tab-content {
      display: flex;
      margin-top: 52px;
      margin-bottom: 52px;
      flex-direction: row;
      margin-left: 25px;

      .item-default {
        width: 210px;
        height: 48px;
        background: #FFFFFF;
        line-height: 48px;
        border-radius: 4px;
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
        border: 1px solid #CDCDCD;
        font-size: 28px;
        font-weight: 400;
        color: #999999;
      }

      .item-check {
        width: 210px;
        height: 48px;
        margin-left: 10px;
        margin-right: 10px;
        line-height: 48px;
        text-align: center;
        background: rgba(192, 152, 98, 0.08);
        border-radius: 4px;
        border: 1px solid #C09862;
        font-size: 28px;
        font-weight: 500;
        color: #C09862;
      }
    }

    .chart-info {
      width: 95%;
      margin: 0 auto;

      &__canvas {
        width: 100%;
        height: 400px;
      }
    }
  }

  .goods-content {
    display: flex;
    margin-top: 20px;
    padding-bottom: 60px;
    flex-direction: column;
    background: #FFFFFF;
    box-shadow: 8px 8px 16px 4px rgba(79, 57, 42, 0.1);

    .title-content {
      display: flex;
      flex-direction: row;
      margin-top: 60px;
      margin-bottom: 52px;
      margin-left: 20px;

      .icon {
        width: 6px;
        height: 26px;
        margin-right: 14px;
      }

      .title {
        font-size: 32px;
        font-weight: 500;
        color: #666666;
        line-height: 32px;
      }
    }

    .action-content {
      display: flex;
      flex-direction: row;
      margin-bottom: 50px;
      align-items: center;
      .point{
        font-size: 28px;
        font-weight: 400;
        color: #C09862;
        margin-left:40px ;
        line-height: 28px;
      }
      .action-title{
        font-size: 28px;
        font-weight: 400;
        color: #999999;
        flex: 1;
        line-height: 28px;
      }
      .btn{
        width: 210px;
        margin-right: 40px;
        height: 64px;
        background: linear-gradient(180deg, #D9B17A 0%, #C09862 100%);
        border-radius: 4px;
        line-height: 64px;
        font-size: 28px;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        border: 1px solid #C09862;
      }
    }

    .goods-list{
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 107px;
      margin-left: 40px;
      margin-right: 40px;
      border-top: 1px dotted #DDDDDD;
      .goods-title{
        font-size: 28px;
        font-weight: 400;
        color: #999999;
        flex: 1;
        line-height: 28px;
      }
      .goods-des{
        font-size: 28px;
        font-weight: 400;
        color: #999999;
        line-height: 28px;
      }
    }
    .goods-list-x{
      height: 1px;
      margin-left: 40px;
      margin-right: 40px;
      border-top: 1px dotted #DDDDDD;

    }
  }
}